<!DOCTYPE html>
<%@ page isELIgnored="false"%>

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery/jquery-min.js"></script>
<script type="text/javascript" src="../jquery/jquery.tools.min.js"></script>
<style> 
div { 
border: .1em dotted #900; 
} 
#border { 
border-width: .1em; 
border-style: solid; 
border-color: #900; 
} 
</style> 
</head>

<body>

	<div id="border">

		<form id="loginform" name="loginform" >
			<table width="60%" align="center">
				<tr>
					<td><label for="userId">User id * </label>
					</td>
					<td><input type="email" id="userid" name="userid"
							required="true" maxlength="30" value="karolstuart@yahoo.com" />
					</td>
				</tr>
				<tr>
					<td><label for="password">Password * (valid password = karol)</label>
					</td>
					<td><input type = "password" name="password" id="password" value="karol" minlength="8" maxlength="30" />
					</td>
				</tr>
				<tr>
					<td colspan=2 align="center">
						<button type="submit" id="butSaveUserDetails">Submit
							button</button> </td>
				</tr>
			</table>
		</form>
	</div>
	<script type="text/javascript">
 	$(document).ready(function() {
		$("#loginform").validator().submit(function f(event){
			
			 if (!event.isDefaultPrevented()) {
				 $.ajax({ 
					 type: 'POST', 
					 url: "login", 
					 data: $("#loginform").serialize(), 
					 //datatype: "xml", 
					 success: function (response) {
						 alert(response); 
					 }, 
					 error:	 function(response, ajaxOptions, thrownError) {
						 alert("ERROR : " + response); 
					 }
				});
				 event.preventDefault();
			 }
			 else {
				 event.preventDefault();
				 //application.clearMessage();
				 //application.showErrorMessage("Please correct the below form errors"); 
			 }
		});
		

	}); 
	</script>

</body>
</html>